import React from 'react';
import {Controller, useFormContext } from "react-hook-form";
import { loginValidation, passwordValidation} from "../validation";
import {TextField} from "@mui/material";
import { ISignForm } from '../AuthForm';
import {RHFAutocompleteField} from "./RHFAutocompleteFieldProps";


export const FormFields = () => {
    const { control, watch} = useFormContext<ISignForm>()
    const options = [
        {id: "1", label: "Option 1"},
        {id: "2", label: "Option 2"},
    ];




    return (
        <>
            <Controller
                name="login"
                control={control}
                // rules={loginValidation}
                render={({field}) => {
                    return (
                        <TextField
                            label="Логин"
                            margin="normal"
                            size="small"
                            className="auth-form-input"
                            fullWidth={true}
                            onChange={(event) => field.onChange(event)}
                            // helperText={errors.login?.message}
                            // error={!!errors.login?.message}
                        />
                    )
                }}
            />
            <Controller
                name="password"
                control={control}
                // rules={passwordValidation}
                render={({field}) => {
                    return (
                        <TextField
                            label="Пароль"
                            margin="normal"
                            size="small"
                            className="auth-form-input"
                            fullWidth={true}
                            onChange={(event) => field.onChange(event)}
                            // helperText={errors.password?.message}
                            // error={!!errors.password?.message}
                        />
                    )
                }}
            />

            <RHFAutocompleteField
                name="autocomplete"
                options={options}
                control={control}
            />

            <RHFAutocompleteField
                name="autocomplete2"
                options={options}
                control={control}
            />


        </>
    );
};
